<template>
  <div>
    <van-nav-bar title="商品详情"
                 left-text="返回"
                 right-text="按钮"
                 left-arrow
                 @click-left="$router.go(-1)"
                 @click-right="onClickRight" />
    <van-tabs v-model="active"
              scrollspy
              sticky>
      <van-tab title="商品简介">
        <van-swipe class="goods_img">
          <van-swipe-item v-for="item in infoData.pics"
                          :key="item">
            <img :src="item.pic"
                 alt="">
          </van-swipe-item>
        </van-swipe>
        <div class="price">{{infoData.base.minPrice}}</div>
        <div class="pname">
          {{infoData.base.name}}
        </div>
      </van-tab>
      <van-tab title="商品详情">
        <h1>商品详情</h1>
        <div class="img_wrap"
             v-html="infoData.content">

        </div>
      </van-tab>
      <van-tab title="商品评价">内容 3</van-tab>
    </van-tabs>
    <!-- 详情底部导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o"
                             text="客服"
                             dot />
      <van-goods-action-icon icon="cart-o"
                             text="购物车"
                             badge="5" />
      <van-goods-action-icon icon="shop-o"
                             text="店铺"
                             badge="12" />
      <van-goods-action-button class="add"
                               type="warning"
                               text="加入购物车" />
      <van-goods-action-button class="buy"
                               type="danger"
                               text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>  
import { getInfoApi } from "../../api/home"
export default {
  name: 'Ljfvue2011Index',

  data () {
    return {
      active: 0,
      infoData: {
        pics: [], //轮播图数据
        base: {}, //基本信息数据
        content: "" //大图的数据
      }
    };
  },
  created () {
    var pid = this.$route.query.pid;
    // 调用接口传送id
    getInfoApi(pid).then(res => {
      console.log(res)
      this.infoData.pics = res.data.data.pics;
      this.infoData.base = res.data.data.basicInfo;
      this.infoData.content = res.data.data.content;
    })
  },
  mounted () {

  },

  methods: {
    onClickRight () { }
  },
};
</script>

<style lang="less" >
.img_wrap p img {
  width: 100%;
}
.add {
  margin-right: 10px;
}
.goods_img {
  width: 100%;
  height: 500px;
  background: darkorange;
  img {
    width: 100%;
    height: 500px;
  }
}
.pname {
  padding: 0 40px;
  box-sizing: border-box;
  font-size: 25px;
  line-height: 50px;
  background: white;
}
.price {
  padding: 0 40px;
  box-sizing: border-box;
  color: red;
  font-size: 30px;
  line-height: 50px;
  background: white;
}
</style>